<template>
  <div class="mutiple_bill_operate">
    <div class="all_select">全选</div>
    <div class="operate_button">
      <div class="button_item" v-for="(item, index) in buttonList" :key="'button' + index" @click="handleOperateBills(index)">
        <i :class="['iconfont', item.icon, 'button_icon']"></i>
        <span>{{ item.name }}</span>
      </div>
      <span class="save" @click="handleSave">
        <i class="iconfont icon-kongxinduigou"></i>
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  setup() {
    const store = useStore()
    const buttonList = ref([
      {
        icon: 'icon-tongji',
        name: '统计'
      }, {
        icon: 'icon-daochu',
        name: '导出'
      }, {
        icon: 'icon-icon1',
        name: '编辑'
      }, {
        icon: 'icon-shanchu',
        name: '删除'
      }, 
    ])
    const handleSave = () => {
      store.commit('get_footer_visible', true)
    }
    const handleOperateBills = (index: number) => {
      switch (index) {
        // 统计
        case 0:
          console.log('统计');
          break;
        // 导出
        case 1:
          console.log('导出');
          break;
        // 编辑
        case 2:
          console.log('编辑');
          break;
        // 删除
        case 3:
          console.log('删除');
          break;
        default:
          break;
      }
    }
    return {
      buttonList,
      handleSave,
      handleOperateBills
    }
  }
})
</script>

<style scoped>
  .mutiple_bill_operate {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
  }
  .all_select {
    font-size: 18px;
  }
  .operate_button {
    display: flex;
    align-items: center;
  }
  .button_item {
    display: flex;
    flex-direction: column;
    margin: 0 12px;
    font-size: 14px;
  }
  .save {
    margin-left: 12px;
    font-size: 20px;
  }
  .button_icon {
    font-size: 16px;
  }
</style>